<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { loginUser, registerUser } from '../utils/userService'

const router = useRouter()
const activeTab = ref('login') // 默认显示登录选项

// 登录表单数据
const loginForm = ref({
  username: '',
  password: '',
  rememberMe: false
})

// 注册表单数据
const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
  email: ''
})

// 错误信息
const errorMessage = ref('')

// 切换选项卡
const switchTab = (tab) => {
  activeTab.value = tab
  errorMessage.value = '' // 切换时清除错误信息
}

// 返回首页
const goBack = () => {
  router.push('/')
}

// 处理登录
const handleLogin = async () => {
  errorMessage.value = ''
  
  if (!loginForm.value.username || !loginForm.value.password) {
    errorMessage.value = '请输入用户名和密码'
    return
  }
  
  try {
    const result = loginUser(loginForm.value.username, loginForm.value.password)
    
    if (result.success) {
      // 登录成功，使用window.location.href强制刷新页面以确保用户状态正确更新
      alert('登录成功！')
      window.location.href = '/'
    } else {
      errorMessage.value = result.message
    }
  } catch (error) {
    errorMessage.value = '登录失败，请稍后再试'
    console.error('Login error:', error)
  }
}

// 处理注册
const handleRegister = async () => {
  errorMessage.value = ''
  
  try {
    const result = registerUser(
      registerForm.value.username,
      registerForm.value.password,
      registerForm.value.confirmPassword,
      registerForm.value.email
    )
    
    if (result.success) {
      // 注册成功，切换到登录选项卡
      alert(result.message)
      switchTab('login')
      // 清空注册表单
      registerForm.value = {
        username: '',
        password: '',
        confirmPassword: '',
        email: ''
      }
    } else {
      errorMessage.value = result.message
    }
  } catch (error) {
    errorMessage.value = '注册失败，请稍后再试'
    console.error('Register error:', error)
  }
}

// 处理扫码登录刷新
const refreshQRCode = () => {
  alert('二维码已刷新')
  // 实际应用中这里应该重新请求新的二维码
}
</script>

<template>
  <div class="auth-container">
    <!-- 背景图片遮罩层 -->
    <div class="auth-background"></div>
    
    <!-- 返回按钮 -->
    <button class="back-button" @click="goBack">← 返回首页</button>
    
    <!-- 认证卡片 -->
    <div class="auth-card">
      <h2 class="auth-title">欢迎使用</h2>
      
      <!-- 选项卡导航 -->
      <div class="auth-tabs">
        <button 
          class="auth-tab" 
          :class="{ active: activeTab === 'login' }"
          @click="switchTab('login')"
        >
          登录
        </button>
        <button 
          class="auth-tab" 
          :class="{ active: activeTab === 'register' }"
          @click="switchTab('register')"
        >
          注册
        </button>
        <button 
          class="auth-tab" 
          :class="{ active: activeTab === 'scan' }"
          @click="switchTab('scan')"
        >
          扫码登录
        </button>
      </div>
      
      <!-- 错误信息显示 -->
      <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      
      <!-- 登录表单 -->
      <div v-if="activeTab === 'login'" class="auth-form">
        <div class="form-group">
          <label for="login-username">用户名</label>
          <input 
            type="text" 
            id="login-username" 
            placeholder="请输入用户名" 
            v-model="loginForm.username"
          />
        </div>
        <div class="form-group">
          <label for="login-password">密码</label>
          <input 
            type="password" 
            id="login-password" 
            placeholder="请输入密码" 
            v-model="loginForm.password"
            @keyup.enter="handleLogin"
          />
        </div>
        <div class="form-options">
          <label class="checkbox-label">
            <input type="checkbox" v-model="loginForm.rememberMe"/>
            记住我
          </label>
          <a href="#" class="forgot-password">忘记密码？</a>
        </div>
        <button class="submit-button" @click="handleLogin">登录</button>
      </div>
      
      <!-- 注册表单 -->
      <div v-if="activeTab === 'register'" class="auth-form">
        <div class="form-group">
          <label for="register-username">用户名</label>
          <input 
            type="text" 
            id="register-username" 
            placeholder="请设置用户名" 
            v-model="registerForm.username"
          />
        </div>
        <div class="form-group">
          <label for="register-password">密码</label>
          <input 
            type="password" 
            id="register-password" 
            placeholder="请设置密码" 
            v-model="registerForm.password"
          />
        </div>
        <div class="form-group">
          <label for="register-confirm">确认密码</label>
          <input 
            type="password" 
            id="register-confirm" 
            placeholder="请确认密码" 
            v-model="registerForm.confirmPassword"
          />
        </div>
        <div class="form-group">
          <label for="register-email">邮箱</label>
          <input 
            type="email" 
            id="register-email" 
            placeholder="请输入邮箱" 
            v-model="registerForm.email"
            @keyup.enter="handleRegister"
          />
        </div>
        <button class="submit-button" @click="handleRegister">注册</button>
      </div>
      
      <!-- 扫码登录 -->
      <div v-if="activeTab === 'scan'" class="scan-login">
        <div class="qrcode-container">
          <div class="qrcode-placeholder">扫描二维码登录</div>
        </div>
        <p class="scan-hint">请使用手机APP扫描二维码登录</p>
        <button class="refresh-button" @click="refreshQRCode">
          刷新二维码
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 认证页面容器 */
.auth-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 背景图片 */
.auth-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  filter: brightness(0.7);
  z-index: -1;
}

/* 返回按钮 */
.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: all 0.3s;
}

.back-button:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateX(-2px);
}

/* 认证卡片 */
.auth-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 30px;
  width: 400px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

/* 标题 */
.auth-title {
  text-align: center;
  color: #333;
  margin-bottom: 25px;
  font-size: 24px;
  font-weight: bold;
}

/* 选项卡导航 */
.auth-tabs {
  display: flex;
  margin-bottom: 25px;
  border-bottom: 2px solid #f0f0f0;
}

.auth-tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.auth-tab:hover {
  color: #e81742;
}

.auth-tab.active {
  color: #e81742;
  font-weight: bold;
}

.auth-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e81742;
}

/* 错误信息样式 */
.error-message {
  color: #e81742;
  font-size: 14px;
  padding: 10px;
  background-color: #ffebee;
  border-radius: 6px;
  margin-bottom: 15px;
  text-align: center;
}

/* 表单样式 */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.form-group input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: #e81742;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.forgot-password {
  font-size: 14px;
  color: #e81742;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

.submit-button {
  padding: 12px;
  background-color: #e81742;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.submit-button:hover {
  background-color: #c71538;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 23, 66, 0.3);
}

/* 扫码登录样式 */
.scan-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}

.qrcode-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.qrcode-placeholder {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e0e0e0;
  border: 2px dashed #999;
  border-radius: 8px;
  color: #666;
  font-size: 16px;
  text-align: center;
  padding: 10px;
}

.scan-hint {
  font-size: 14px;
  color: #666;
  text-align: center;
}

.refresh-button {
  padding: 10px 24px;
  background-color: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.refresh-button:hover {
  background-color: #e0e0e0;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .auth-card {
    width: 90%;
    padding: 20px;
  }
  
  .qrcode {
    width: 160px;
    height: 160px;
  }
}
</style>